<template>
  <div :class="{'mobile-wrap': showMobilePage}">
    <Title title="平台信息" style="margin-bottom:16px" font-size="16px"/>
    <img :src="accountStatusImg" class="contract-icon" alt="">
    <div class="label">
      <span class="order-type">下单平台：</span>
      <platformIcon :data="detailInfo.platformTypeName" />
      <ToolTip :content="handleContent(detailInfo.platformTypeName)" :tool-tip="detailInfo.platformTypeName" class="g3"/>
      <div class="label-checkbox flex-center">
        <el-checkbox v-model="detailInfo.autoPick" :style="{marginTop:!resourceId?'16px':'0px'}" disabled style="margin-left:8px" @change="autoPickChange">{{ detailInfo.platformTypeName === '小红书' ? '自动采集更新：账号、粉丝量、赞与收藏' : '自动采集更新：账号、粉丝量' }}</el-checkbox>
        <tipIcon content="90天内无订单账号将自动停止采集，如有需要请手动开启" class="ml5" style="top:1px" img-width="16" img-height="16"/>
      </div>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import platformIcon from '@/components/Common/platformIcon';
import { mapState } from 'vuex';
import { autoPick } from '@/api/resource';
// img
import signedImg from '@/assets/signStatus/signed.png';
import notSignImg from '@/assets/signStatus/notSign.png';
import cancelledImg from '@/assets/signStatus/cancelled.png';
import notSignContractImg from '@/assets/signStatus/notSign_contract.png';
import signedContractImg from '@/assets/signStatus/signed_contract.png';
import cancelledContractImg from '@/assets/signStatus/cancelled_contract.png';

export default {
  components: {
    Title,
    platformIcon
  },
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    accountStatusImg() {
      switch (this.detailInfo.signStatus) {
        case 0:
          return this.detailInfo.isContract ? notSignContractImg : notSignImg;
        case 1:
          return this.detailInfo.isContract ? signedContractImg : signedImg;
        case -1:
          return this.detailInfo.isContract ? cancelledContractImg : cancelledImg;
      }
    },
    resourceId() {
      return Number(this.$route.params.resourceId) || '';
    }
  },
  methods: {
    handleContent(content) {
      if (!content) return '';
      if (content.length > 16) {
        return content.slice(0, 16) + '...';
      }
      return content;
    },
    autoPickChange(val) {
      if (!this.isPlatformFit()) {
        this.detailInfo.autoPick = false;
        this.$message.warning('该平台暂无采集功能，如需要请联系研发部');
      } else {
        const data = {
          id: this.resourceId,
          autoPick: this.detailInfo.autoPick
        };
        autoPick(data).then(res => {
          if (res.code !== 200) {
            this.$message.error(res.message);
          }
        }).catch(err => {
          console.log(err);
        });
      }
      this.$forceUpdate();
    }
  }
};
</script>
<style lang="scss" scoped>
  .contract-icon {
    position: absolute;
    right: 262px;
    top: 20px;
    z-index: 10;
    width: 110px;
  }
  .order-type{
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    line-height:14px;
    margin:0 12px 0px 32px;
    color:rgba(153,153,153,1);
  }
  .label{
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .mobile-wrap {
    .label {
      flex-wrap: wrap;
    }
    .order-type {
      margin: 0;
    }
    .contract-icon {
      right: 100px !important;
    }
    .label-checkbox {
      width: 100%;
      margin-left: 68px;
    }
  }

</style>
